<template>
	<view>
		<view class="d-flex j-sb a-center">
			<view class="font-lg font-weight">用户管理</view>
			
		<view class="d-flex">
			<view class="rounded bg-primary button font-md text-white d-flex a-center j-center"  @click="onAdd">新增</view>
			<view class="rounded bg-orange button font-md text-white d-flex a-center j-center ml-1"  @click="onAuth">授权</view>
		</view>
		</view>
	
		<uni-table class="mt-1" style="height: 280rpx" @selection-change="e=>authIndexList = e.detail.index" type="selection" ref="table" border stripe emptyText="暂无更多数据">
			<uni-tr class="position-sticky bg-white" >
				<uni-th><text class="font-md">姓名</text></uni-th>
				<uni-th ><text class="font-md">手机号</text></uni-th>
				<uni-th ><text class="font-md">部门</text></uni-th>
				<uni-th width="150"><text class="font-md">操作</text></uni-th>
			</uni-tr>
			<uni-tr v-for="(item, index) in tableData" :key="index">
				<uni-td>
					<text class="font-md" v-html="item.name"></text>
				</uni-td>
				<uni-td>
					<text class="font-md" >{{item.phone}}</text>
				</uni-td>
				<uni-td>
					<text class="font-md" >{{getDepName(item.did)}}</text>
				</uni-td>
				
				
				<uni-td>
					
					<view class="d-flex a-center">
						<view @click="onEdit(item)" class="font-md text-primary ml">编辑</view>
						<view @click="onDel(item)" class="font-md text-blue ml">删除</view>
					</view>
					
				</uni-td>
			</uni-tr>
		</uni-table>
		
		<uni-popup ref="popupRef" type="center">
			<view class="p-2 bg-white model-shell ">
				<view class="font-lg font-weight">{{popupTitle}}</view>
				<view class="px-2 mt-2 font-md">
					<uni-forms labelWidth="46rpx" ref="formRef"  :modelValue="formData" :rules="rules">
						<uni-forms-item required  label="部门:" name="did">
							<uni-data-picker v-model="formData.did"  popup-title="请选择部门" :localdata="dataPickerTree" placeholder="选择部门" />
						</uni-forms-item>
						<uni-forms-item required class="mt-1"  label="手机号:" name="phone">
							<uni-easyinput type="number" maxlength="11" v-model="formData.phone" placeholder="请输入手机号" />
						</uni-forms-item>	
						<uni-forms-item :required="!formData.id" class="mt-1"  label="密码:" name="password">
							<uni-easyinput type="password" v-model="formData.password" :placeholder="formData.id ?'不修改密码请留空':'请输入密码'" />
						</uni-forms-item>
						<uni-forms-item required class="mt-1"  label="姓名:" name="name">
							<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
						</uni-forms-item>
						<uni-forms-item  class="mt-1"  label="卡号:" name="rfid">
							<uni-easyinput type="text" v-model="formData.rfid" placeholder="读取卡号" />
						</uni-forms-item>
						<uni-forms-item required class="mt-1"  label="状态:" name="status">
							<uni-data-checkbox v-model="formData.status" :localdata="[{text: '启动',value: 1},{text: '禁用',value: 0}]" />
						</uni-forms-item>
						
				
						
					</uni-forms>
					
					<view class="d-flex mt-3 ">
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-secondary button font-md text-white" @click="popupRef.close()">取消</view>
						</view>
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-primary button font-md text-white" type="primary" @click="onsave">保存</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="boxListRef" type="center">
			<view style="width: 90vw;height: 90vh;" class="h-100 bg-white rounded">
				<view class="p-2">
					<view class="font-big">选择授权箱格</view>
					<view class=" mt-1">
						<scroll-view scroll-y="true" style="height: 320rpx;" >
							<view class="d-flex flex-row flex-wrap">
								<view @click="onSelected(item)" v-for="(item,index) in boxList" :key="item" class="boxItem d-flex">
									<view :class="[userAuths.indexOf(item.id) != -1 ?'bg-green':'bg-secondary']" class="flex-1 rounded-min d-flex a-center j-center font-lg text-white">{{item.code}}</view>
								</view>
							</view>
			
						</scroll-view>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="boxinfoRef" type="center">
			<view class="p-2 bg-white model-shell ">
				<view class="font-lg font-weight">{{boxinfo.code}}箱格</view>
				<view class="px-2 mt-2 font-md">
					
					<uni-table class="mt-1" style="height: 140rpx"  ref="table" border stripe emptyText="暂无存放物品">
						<uni-tr class="position-sticky bg-white" >
							<uni-th><text class="font-md">存放物品名称</text></uni-th>
							<uni-th><text class="font-md">数量</text></uni-th>
						</uni-tr>
						<uni-tr v-for="(item, index) in boxinfo.goods" :key="index">
							<uni-td>
								<text class="font-md" v-html="item.name"></text>
							</uni-td>
							<uni-td>
								<text class="font-md" v-html="item.num"></text>			
							</uni-td>
						</uni-tr>
					</uni-table>
					
					<view class="d-flex mt-3 ">
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-secondary button font-md text-white" @click="boxinfoRef.close()">取消</view>
						</view>
						<view class="flex-1 px-1 d-flex a-center j-center">
							<view class="rounded bg-primary button font-md text-white" type="primary" @click="onSelected(boxinfo,boxinfo.id)">选中</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useStore } from '@/store/index.js';
const store = useStore();

const tableData = ref([])
const dataPickerTree = ref([]);
const popupRef= ref(null);
const popupTitle = ref('');
const oldPwd = ref('')
const formData = ref({});
const formRef = ref(null);
const rules = ref({
	name: {
		rules: [{
			required: true,
			errorMessage: '请输入姓名',
		}],
	},
	phone: {
		rules: [{
			required: true,
			errorMessage: '请输入手机号',
		},
		// {
		// 		minLength: 11,
		// 		maxLength: 11,
		// 		errorMessage: '请正确输入11位数字的手机号',
		// },
		],
	},
	did: {
		rules: [{
			required: true,
			errorMessage: '请选择部门',
		}],
	},
	status: {
		rules: [{
			required: true,
			errorMessage: '请选择状态',
		}],
	},
});

const boxListRef = ref(null);
const boxList = ref([]);

const boxinfoRef = ref(null);
const boxinfo = ref({});

const authIndexList = ref([])
const userAuths = ref([])



const getDepName = (id) => {
	return store.depStore.getNameStrand(id)
}


const reLoad = () => {
	tableData.value = store.userStore.list;
	boxList.value = store.goodsStore.getBoxList();
	dataPickerTree.value = store.depStore.getDataPickerTree()
	formData.value = {id:'',name:'',username:'',did:'',status:1,rfid:''};
	
};


const onAdd = (type) => {
	popupTitle.value = '新增用户';
	popupRef.value.open();
};

const onEdit = (item) => {
	popupTitle.value = '编辑用户';
	oldPwd.value = item.password;
	item.password = '';
	formData.value = item;
	popupRef.value.open();
};



const onDel = (item) => {
	store.userStore.del(item.id)
	reLoad()
};


const onsave = () => {
	uni.showLoading()
	formRef.value.validate().then((res) => {
			uni.hideLoading();
			
			if(formData.value.id){
				if(!formData.value.password){
					formData.value.password = oldPwd.value
				}
			}else{
				if(!formData.value.password){
					uni.$xwl.toast('请输入密码')
					return
				}
			}
			
			const user  =  store.userStore.list.find(item => item.phone == formData.value.phone)
			
			if(!user || formData.value.id == user.id){
				popupRef.value.close();
				store.userStore.save(formData.value)
				reLoad()
			}else{
				uni.$xwl.toast('用户已存在')
			}

	}).catch((err) => {
			uni.hideLoading();
			console.log('表单错误信息：', err);
	});
	
	
};

const onAuth= ()=>{
	if(authIndexList.value.length == 0){
		uni.$xwl.toast('请选择用户')
		return
	}
	
	if(authIndexList.value.length == 1){
		const auth = tableData.value[authIndexList.value[0]].auth
		if(auth){
			userAuths.value = auth.split(',')
		}else{
			userAuths.value = []
		}
	}else{
		userAuths.value = []
	}
	
	boxListRef.value.open()
}

const onSelected = (item,boxId='') => {
	
	if(!boxId){
		boxinfo.value = item
		if(userAuths.value.indexOf(boxId) != -1){
			userAuths.value.splice(boxId,1)
		}else{
			boxinfoRef.value.open();
		}
		
	}else{

		
			userAuths.value.push(boxId)
			boxinfoRef.value.close()
		
		
	}
	
};


onLoad(() => {reLoad()});
</script>

<style lang="scss">
	.button {
		width: 60rpx;
		height: 20rpx;
	}
	.model-shell {
		width: 300rpx;
		border-radius: 6rpx;
		.form-label {
			text-align: right;
			width: 50rpx;
		}
	}
	
	.boxItem{
		width: 71.3rpx;
		height: 46rpx;
		padding: 4rpx;
	}
</style>
